<template>
    <div>
      <Row class="formRow">
        <Col span="2" class="rightRow">
         <span class="ModelInputTitle">服务点</span>
        </Col>
        <Col span="2" class="leftRow">
          <Select  size="large" style="width:100%" v-model="inlineForm.point" placeholder="服务点"  filterable>
            <Option v-for="p in citylist"  :value="p.id" :key="p.id">{{p.regionName}}</Option>
          </Select>
        </Col>
        <Col span="2" class="rightRow">
          <span class="ModelInputTitle">是否有效</span>
        </Col>
        <Col span="2" class="leftRow">
          <Select  size="large" style="width:100%" v-model="inlineForm.valid" placeholder="是否有效">
            <Option value="1">是</Option>
            <Option value="0">否</Option>
          </Select>
        </Col>
        <Col span="16" class="leftRow">
          <Button type="primary" @click="onSubmit">查询</Button>
          <Button type="primary" @click="resetForm">重置</Button>
          <Button type="primary" @click="onAdd">添加</Button>
        </Col>
      </Row>

      <Table :data="tableData" :columns="cloums" stripe :loading="loading"  style="margin-top: 20px"></Table>
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page :total="total" :current="1" :placement="placement" @on-change="changePage" show-total show-elevator show-sizer @on-page-size-change="changeSize"></Page>
        </div>
      </div>

      <Modal
        v-model="add"
        title="添加"
        @on-ok="addok"
        @on-cancel="cancel('您取消了操作')" width="600">

        <Row>
          <Col span="12">   <span class="ModelInputTitle">服务点</span>
          <Select  size="large" style="width:200px" v-model="addForm.point" placeholder="服务点" filterable>
            <Option v-for="p in citylist"  :value="p.id" :key="p.id">{{p.regionName}}</Option>
          </Select></Col>
          <!--<Col span="12">   <span class="ModelInputTitle">市</span>-->
          <!--<Select  size="large" style="width:200px" v-model="addForm.cityCd" placeholder="市">-->
            <!--<Option v-for="c in cityArr"  :value="c.id" :key="c.regionCode">{{c.regionName}}</Option>-->
          <!--</Select>-->
          <!--</Col>-->
        </Row>
        <Row style="margin-top: 20px">
          <Col span="12">   <span class="ModelInputTitle">是否有效</span>
          <Select  size="large" style="width:200px" v-model="addForm.valid" placeholder="是否有效">
            <Option value="1">是</Option>
            <Option value="0">否</Option>
          </Select>
          </Col>
          <Col span="12">
          <span class="ModelInputTitle">服务价格</span><Input v-model="addForm.price" size="large" style="width: 200px" placeholder="服务价格"></Input>
          </Col>
        </Row>
        <Row style="margin-top: 20px">

          <Col span="24">
          <span class="ModelInputTitle">备注</span><Input v-model="addForm.remark" size="large" style="width: 485px" placeholder="备注"></Input>
          </Col>
        </Row>
      </Modal>

      <Modal
        v-model="edit"
        title="编辑"
        @on-ok="editOk"
        @on-cancel="cancel('您取消了操作')" width="600">

        <Row>
          <Col span="24">   <span class="ModelInputTitle">服务点</span>
          <Input v-model="editForm.service" size="large" style="width: 480px" disabled></Input>
          </Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="12">   <span class="ModelInputTitle">是否有效</span>
          <Select  size="large" style="width:200px" v-model="editForm.valid" placeholder="是否有效">
            <Option value="1">是</Option>
            <Option value="0">否</Option>
          </Select>
          </Col>
          <Col span="12">
          <span class="ModelInputTitle">服务价格</span><Input v-model="editForm.price" size="large" style="width: 200px" placeholder="服务价格"></Input>
          </Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="24">
          <span class="ModelInputTitle">备注</span><Input v-model="editForm.remark" size="large" style="width: 485px" placeholder="备注"></Input>
          </Col>
        </Row>
      </Modal>

      <Modal
        v-model="productDetail"
        title="产品详情"
         width="750" :mask-closable="false">
        <Row>
          <Col span="6">
          <Button type="primary" @click="addProduct">添加</Button>
          </Col>
        </Row>

        <Table :data="productData" :columns="productCloums" stripe :loading="productLoading"  style="margin-top: 10px"></Table>
        <div style="margin: 10px;overflow: hidden">
          <div style="float: right;">
            <Page :total="productTotal" :current="1" :placement="top" @on-change="productChangePage" show-total show-elevator show-sizer @on-page-size-change="productChangeSize"></Page>
          </div>
        </div>
        <div slot="footer"></div>
      </Modal>


      <Modal
        v-model="addProductModal"
        title="添加"
        @on-ok="addProductok"
        @on-cancel="cancel('您取消了操作')" width="600">

        <Row>
          <Col span="12">   <span class="ModelInputTitle">产品类型</span>
            <Select  size="large" style="width:200px" v-model="addProductForm.prdType" placeholder="产品类型" filterable @on-change="getProductByType">
              <Option v-for="p in productType"  :value="p.prodTypeId" :key="p.prodTypeId">{{p.prdTypeName}}</Option>
            </Select></Col>
          <Col span="12">   <span class="ModelInputTitle">产品名称</span>
          <Select  size="large" style="width:200px" v-model="addProductForm.prdid" placeholder="产品名称" filterable>
            <Option v-for="p in allProduct"  :value="p.id" :key="p.id">{{p.productName}}</Option>
          </Select></Col>

        </Row>
        <Row style="margin-top: 20px">
          <Col span="12">
          <span class="ModelInputTitle">市场价格</span><Input v-model="addProductForm.marketPirce" size="large" style="width: 200px" placeholder="服务价格"></Input>
          </Col>
          <Col span="12">
          <span class="ModelInputTitle">价格</span><Input v-model="addProductForm.price" size="large" style="width: 200px" placeholder="服务价格"></Input>
          </Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="12">   <span class="ModelInputTitle">是否有效</span>
            <Select  size="large" style="width:200px" v-model="addProductForm.valid" placeholder="是否有效">
              <Option value="1">是</Option>
              <Option value="0">否</Option>
            </Select>
          </Col>
        </Row>
        <Row style="margin-top: 20px">

          <Col span="24">
          <span class="ModelInputTitle">备注</span><Input v-model="addProductForm.remark" size="large" style="width: 485px" placeholder="备注"></Input>
          </Col>
        </Row>
      </Modal>

      <Modal
        v-model="editProductModal"
        title="编辑产品"
        @on-ok="editProductok"
        @on-cancel="cancel('您取消了操作')" width="600">

        <Row>
          <Col span="12">   <span class="ModelInputTitle">产品类型</span>
            <Select  size="large" style="width:200px" v-model="editProductForm.prdType" placeholder="产品类型" filterable @on-change="getProductByType">
              <Option v-for="p in productType"  :value="p.prodTypeId" :key="p.prodTypeId">{{p.prdTypeName}}</Option>
            </Select></Col>
          <Col span="12">   <span class="ModelInputTitle">产品名称</span>
          <Select  size="large" style="width:200px" v-model="editProductForm.prdid" placeholder="产品名称" filterable>
            <Option v-for="p in allProduct"  :value="p.id" :key="p.id">{{p.productName}}</Option>
          </Select></Col>

        </Row>
        <Row style="margin-top: 20px">
          <Col span="12">
          <span class="ModelInputTitle">市场价格</span><Input v-model="editProductForm.marketPirce" size="large" style="width: 200px" placeholder="服务价格"></Input>
          </Col>
          <Col span="12">
          <span class="ModelInputTitle">价格</span><Input v-model="editProductForm.price" size="large" style="width: 200px" placeholder="服务价格"></Input>
          </Col>
        </Row>
        <Row style="margin-top: 20px">
          <Col span="12">   <span class="ModelInputTitle">是否有效</span>
            <Select  size="large" style="width:200px" v-model="editProductForm.valid" placeholder="是否有效">
              <Option value="1">是</Option>
              <Option value="0">否</Option>
            </Select>
          </Col>
        </Row>
        <Row style="margin-top: 20px">

          <Col span="24">
          <span class="ModelInputTitle">备注</span><Input v-model="editProductForm.remark" size="large" style="width: 485px" placeholder="备注"></Input>
          </Col>
        </Row>
      </Modal>

    </div>
</template>
<script type="text/ecmascript-6">

  import {getAllProductType,getProductList,serverList,getProductByServerId,
          getRegionList,getProduct,addServer,updateServer,addServerProduct,updateServerProduct,qs} from './../../api/common'
    export default {
        data() {
            return {
              top:'top',
              productPageSize:10,
              productPage:1,
               page:1,
              pageSize:10,
              productType:[],
              placement:"bottom",
              citylist:[],//城市列表
              allProduct:[],//所有产品信息
              productDetail:false,//产品详情模态框
              inlineForm:{
                point:"",
                valid:""
              },
              add:false,
              addForm:{
                point:"",
                price:"",
                valid:"",
                remark:""
              },
              edit:false,
              editForm:{
                 id:"",//服务点id
                regionId:"",
                service:"",
                valid:"",
                price:"",
                remark:""
              },
              tableData:[],
              loading:true,
              total:0,
              cloums:[
                {
                  title: '服务点',
                  key: 'regionName',
//                  width:120,
                  align:"center"
                },
                {
                  title: '服务费',
                  key: 'serverPrice',
                  width:120,
                  align:"center"
                },
                {
                  title: '是否有效',
                  key: 'valid',
                  width:120,
                  align:"center"
                },
                {
                  title: '备注',
                  key: 'remark',
//                  width:200,
                  align:"center"
                },
                {
                  title: '创建人',
                  key: 'creater',
                  width:120,
                  align:"center"
                },
                {
                  title: '修改人',
                  key: 'updater',
                  width:120,
                  align:"center"
                },
                {
                  title:"操作",
                  width:200,
                  align:"center",
                  render:(h,params)=>{
                    return h("div",[
                      h("Button",{
                        props:{
                          type:"error",
                          size:"small"
                        },
                        style:{
                            marginRight:"5px"
                        },
                        on:{
                            click:()=>{
//                                console.log(params.row)
                              this.edit = true;
                              this.editForm.id = params.row.id;
                              this.editForm.service = params.row.regionName;
                              this.editForm.valid = params.row.valid =="是"?"1":"0";
                              this.editForm.price = params.row.serverPrice;
                              this.editForm.remark = params.row.remark;
                              this.editForm.regionId = params.row.regionId;//区域id

                            }
                        }
                      },"编辑"),
                      h("Button",{
                        props:{
                          type:"primary",
                          size:"small"
                        },
                        on:{
                          click:()=>{
                            this.serviceId = params.row.id;
                            this.getProductByServerId(params.row.id);
                          }
                        }
                      },"查看产品")
                    ])
                  }
                }
              ],
              productData:[],//服务点下对应的产品列表
              productLoading:true,
             productTotal:0,
              addProductModal:false,//添加服务点下的产品信息
              serviceId:"",//服务点id
              addProductForm: {
                prdid: "",
                valid:"",
                marketPirce:"",
                price:"",
                remark:"",
                prdType:""
              },
              productCloums:[
                {
                  title: '产品类型名称',
                  key: 'prdTypeName',
                  width:150,
                  align:"center"
                },
                {
                  title: '产品名称',
                  key: 'productName',
                  width:200,
                  align:"center"
                },
                {
                  title: '市场价格',
                  key: 'marketPrice',
                  width:120,
                  align:"center"
                },
                {
                  title: '价格',
                  key: 'price',
                  width:80,
                  align:"center"
                },
                {
                  title: '是否有效',
                  key: 'valid',
                  width:80,
                  align:"center"
                },
                {
                  title: '备注',
                  key: 'remark',
//                  width:200,
                  align:"center"
                },
                {
                  title:"操作",
                  align:"center",
                  fixed:"right",
                  render:(h,params)=>{
                    return h("div",[
                      h("Button",{
                        props:{
                          type:"error",
                          size:"small"
                        },
                        on:{
                          click:()=>{
                            console.log(params.row)
                            this.editProductModal = true;
                            this.editProductForm.prdType = params.row.prdTypeId;
                            this.getProductByType(params.row.prdTypeId);
                            this.editProductForm.prdid = params.row.productId;
                            this.editProductForm.valid = params.row.valid=="是"?"1":"0";
                            this.editProductForm.marketPirce = params.row.marketPrice;
                            this.editProductForm.price = params.row.price;
                            this.editProductForm.remark = params.row.remark;
                            this.editProductForm.id = params.row.id;
                          }
                        }
                      },"编辑")

                    ])
                  }
                }
              ],
              editProductModal:false,
              editProductForm:{
                prdid: "",
                valid:"",
                marketPirce:"",
                price:"",
                remark:"",
                id:"",
                prdType:""
              }
            }
        },
      mounted(){
          this.getInfo();
          this.init();
      },
      methods:{
        getInfo(){
          let _this = this;
          //productType
          getAllProductType().then((result)=>{
            if(result.code =="000000"){
              _this.productType = result.data;
            }else{
              _this.$Notice.error({title:result.msg});
            }
          });
          getRegionList().then((res)=>{
//            console.log(res)
            if(res.code =="000000"){
              _this.citylist = res.data;
            }else{
              _this.$Notice.error({title:res.msg});
            }
          })
          //获取所有产品信息
          getProduct().then((res)=>{
//            console.log(res.data)
            if(res.code =="000000"){
              _this.allProduct = res.data;
            }else{
              _this.$Notice.error({title:res.msg});
            }
          })
        },
        init(){

          var param = qs.stringify({
            page:this.page,
            pageSize:this.pageSize,
            regionId:this.inlineForm.point?this.inlineForm.point:"",
            valid:this.inlineForm.valid?this.inlineForm.valid:""
          });

          serverList(param).then((res)=>{
            console.log(res)
            if(res.code =="000000"){
              this.loading = false;
              this.total = res.count;
              for(let i=0;i<res.data.length;i++){
                res.data[i].valid = res.data[i].valid=="1"?"是":"否"
              }
              this.tableData = res.data;
            }else{
              this.$Notice.error({title:res.msg});
            }
          })

        },
        getProductByType(id){
          let param = qs.stringify({
            prdTypeId:id
          });
          let _this = this;
          getProductList(param).then(result =>{
            if(result.code =="000000"){
              _this.allProduct = result.data;
            }else{
              _this.$Notice.error({title:result.msg});
            }
          })
        },
        getProductByServerId(id){

          var param = qs.stringify({
            id:id,
            page:this.productPage,
            pageSize:this.productPageSize
          });
          getProductByServerId(param).then((res)=>{

            this.productDetail = true;
            if(res.code =="000000"){
              this.productLoading = false;
              for(let i=0;i<res.data.length;i++){
                res.data[i].valid =  res.data[i].valid=="1"?"是":"否";
              }
              this.productData = res.data;
              this.productTotal = res.count;
            }else{
              this.$Notice.error({title:res.msg});
            }
          })
        },
        onSubmit(){
          this.init();
        },
        resetForm(){
          this.inlineForm.point = "";
          this.inlineForm.valid = "";
          this.page = 1;
          this.pageSize = 10;
          this.init();
        },
        onAdd(){
          this.add = true;
        },
        changePage(page){
          this.page = page;
          this.loading = true;
          this.init();
        },
        changeSize(size){
          this.placement = size>=20?"top":"bottom";
          this.pageSize = size;
          this.loading = true;
          this.init();
        },
        addok(){

            let param = qs.stringify({
              regionId:this.addForm.point,
              serverPrice:this.addForm.price,
              valid:this.addForm.valid,
              remark:this.addForm.remark
            })
          addServer(param).then((res)=>{
            if(res.code =="000000"){
              this.$Notice.success({title:"添加成功"});
              this.init();
            }else{
              this.$Notice.error({title:res.msg});
            }
          })
        },
        editOk(){

          let param = qs.stringify({
            id:this.editForm.id,
            regionId :this.editForm.regionId,
            serverPrice:this.editForm.price,
            valid:this.editForm.valid,
            remark:this.editForm.remark
          })
          updateServer(param).then((res)=>{
            if(res.code =="000000"){
              this.$Notice.success({title:"修改成功"})
              this.init();
            }else{
              this.$Notice.error({title:res.msg});
            }
          })
        },
        cancel (msg) {
          this.$Notice.info({title:msg});
        },
        //添加服务点下的产品
        addProduct(){
          this.addProductModal = true;
        },
        addProductok(){
//          console.log("添加")

          var param = qs.stringify({
            serverId:this.serviceId,
            prdId:this.addProductForm.prdid,
            marketPrice:this.addProductForm.marketPirce,
            price:this.addProductForm.price,
            valid:this.addProductForm.valid,
            remark:this.addProductForm.remark
          })
          addServerProduct(param).then((res)=>{
//            console.log(res.data)
            if(res.code =="000000"){
              this.$Notice.success({title:"添加成功"});
              this.getProductByServerId(this.serviceId);
            }else{
              this.$Notice.error({title:res.msg});
            }
          })
        },
        editProductok(){

          let param = qs.stringify({
            id:this.editProductForm.id,
            prdId:this.editProductForm.prdid,
            marketPrice:this.editProductForm.marketPirce,
            price:this.editProductForm.price,
            valid:this.editProductForm.valid,
            remark:this.editProductForm.remark
          });
          updateServerProduct(param).then((res)=>{

            if(res.code == "000000"){
              this.$Notice.success({title:"修改成功"});
              this.getProductByServerId(this.serviceId);
            }else{
              this.$Notice.error({title:res.msg});
            }
          })
        },
        productChangePage(page){
          this.productPage = page;
          this. getProductByServerId(this.serviceId);

        },
        productChangeSize(size){
          this.productPageSize = size;
          this. getProductByServerId(this.serviceId);
        }
      }
    }
</script>
